@using Radzen.Blazor
@using System.Text
@using Radzen.Blazor.Rendering
@using Microsoft.JSInterop
@inherits RadzenHtmlEditorButtonBase
@inject DialogService DialogService
@inject IJSRuntime JSRuntime

<EditorButton Click=@OnClick Icon="insert_photo" Title=@Title />

@code {
    class ImageAttributes
    {
        public string Src { get; set; }
        public string Alt { get; set; }
        public string Width { get; set; }
        public string Height { get; set; }
    }

    [Parameter]
    public string Title { get; set; } = "Insert image";

    [Parameter]
    public string SelectText { get; set; } = "Select image file to upload";

    [Parameter]
    public string UploadChooseText { get; set; } = "Browse";

    [Parameter]
    public string UrlText { get; set; } = "or enter a web address";

    [Parameter]
    public string AltText { get; set; } = "Alternative text";

    [Parameter]
    public string OkText { get; set; } = "OK";

    [Parameter]
    public string CancelText { get; set; } = "Cancel";

    [Parameter]
    public string WidthText { get; set; } = "Image Width";

    [Parameter]
    public string HeightText { get; set; } = "Image Height";

    ImageAttributes Attributes { get; set; }
    RadzenUpload FileUpload { get; set; }

    async Task OnSubmit()
    {
        if (FileUpload.HasValue)
        {
            await FileUpload.Upload();
        }
        else
        {
            await InsertHtml();
        }
    }

    async Task OnUploadComplete(UploadCompleteEventArgs args)
    {
        if (args.JsonResponse.RootElement.TryGetProperty("url", out var property))
        {
            Attributes.Src = property.GetString();
            await InsertHtml();
        }
        else
        {
            DialogService.Close(true);
        }
    }

    async Task InsertHtml()
    {
        DialogService.Close(true);

        await Editor.RestoreSelectionAsync();

        if (!String.IsNullOrEmpty(Attributes.Src))
        {
            var html = new StringBuilder();
            html.AppendFormat("<img src=\"{0}\"", Attributes.Src);
            if (!String.IsNullOrEmpty(Attributes.Alt))
            {
                html.AppendFormat(" alt=\"{0}\"", Attributes.Alt);
            }
            if (!String.IsNullOrEmpty(Attributes.Width))
            {
                html.AppendFormat(" width=\"{0}\"", Attributes.Width);
            }
            if (!String.IsNullOrEmpty(Attributes.Height))
            {
                html.AppendFormat(" height=\"{0}\"", Attributes.Height);
            }
            html.AppendFormat(">");

            await Editor.ExecuteCommandAsync("insertHTML", html.ToString());
        }
    }

    protected override async Task OnClick()
    {
        await Editor.SaveSelectionAsync();

        var uploadHeaders = Editor.UploadHeaders ?? new Dictionary<string, string>();

        Attributes = await JSRuntime.InvokeAsync<ImageAttributes>("Radzen.selectionAttributes", "img", new [] {"src", "alt", "width", "height"});

        var result = await DialogService.OpenAsync(Title, ds =>
        @<div class="rz-html-editor-dialog">
            <div class="rz-html-editor-dialog-item">
                <label>@SelectText</label>
                <RadzenUpload ChooseText=@UploadChooseText @ref=@FileUpload Url=@Editor.UploadUrl Auto="false" Accept="image/*" style="width: 100%" Complete="OnUploadComplete">
                    @foreach (var header in uploadHeaders)
                    {
                        <RadzenUploadHeader Name=@header.Key Value=@header.Value />
                    }
                </RadzenUpload>
            </div>
                <div class="rz-html-editor-dialog-item">
                <label>@WidthText</label>
                <RadzenTextBox @bind-Value=@Attributes.Width style="width: 100%" />
            </div>
                <div class="rz-html-editor-dialog-item">
                <label>@HeightText</label>
                <RadzenTextBox @bind-Value=@Attributes.Height style="width: 100%" />
            </div>
            <div class="rz-html-editor-dialog-item">
                <label>@UrlText</label>
                <RadzenTextBox @bind-Value=@Attributes.Src style="width: 100%" />
            </div>
            <div class="rz-html-editor-dialog-item">
                <label>@AltText</label>
                <RadzenTextBox @bind-Value=@Attributes.Alt style="width: 100%" />
            </div>
            <div class="rz-html-editor-dialog-buttons">
                <RadzenButton Text=@OkText Click="OnSubmit" />
                <RadzenButton Text=@CancelText Click="()=> ds.Close(false)" ButtonStyle="ButtonStyle.Secondary"  />
            </div>
        </div>
        );
    }
}
